<template>
  <div class="squarePage">
    <div class="squareTop">
      <el-input
        v-model="searchSubject"
        placeholder="请输入关键词"
        prefix-icon="el-icon-search"
      />
      <div class="classification">
        <div v-for="(item,index) in classItem" :key="index" class="classItem"
             @click="getClassification(item.id)"
        >
          <div class="iconImage" :style="{ background: item.color }">
            <svg-icon :icon-class="item.name" />
          </div>
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="squareButtom">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="今日推荐" name="recommend">
          <bar-subject-item :subject-by-search="subjectRecomm" :page-flag="pageFlag" />
        </el-tab-pane>
        <el-tab-pane label="最佳杠手" name="best" />
      </el-tabs>
    </div>
  </div>
</template>
<script>
import BarSubjectItem from '../../components/BarSubjectItem';
import { getSubjectInfo } from '../../api/subject';
export default {
  components: { BarSubjectItem },
  data() {
    return {
      bullet: 'bulletOpen',
      activeName: 'recommend',
      searchSubject: '',
      pageFlag: 4,
      classItem: [
        { id: 0, name: 'emotion', title: '情感', color: '#F56C6C' },
        { id: 1, name: 'sociology', title: '社会', color: '#409EFF' },
        { id: 2, name: 'education', title: '教育', color: '#67C23A' },
        { id: 3, name: 'brain', title: '脑洞', color: '#E6A23C' },
        { id: 4, name: 'other', title: '其他', color: '#909399' }
      ],
      subjectRecomm: []
    };
  },
  mounted() {
    const params = {
      start: 0,
      num: 5
    };
    getSubjectInfo(params).then(res => {
      if (res.data.code === 200) {
        this.subjectRecomm = res.data.data;
      }
    });
  },
  methods: {
    getClassification(id) {
      this.$router.push({ name: 'squareList', params: { id: id + 1 } });
    }
  }
};
</script>
<style lang="scss">
.squareButtom{
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    width: 50%;
    margin: 0px auto;
    margin-bottom: 15px;
    .el-tabs__active-bar {
      background:  linear-gradient(to right,#d81e06,#409EFF)
    }
    .el-tabs__item.is-active{
      background: -webkit-linear-gradient(left, #409EFF,#d81e06);     /* 背景色渐变 */
      background-clip: text;         /* 规定背景的划分区域 */
      -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
    }
  }
}
.squareTop{
  .el-input {
    position: relative;
    font-size: 14px;
    width: 90%;
    display: block;
    margin: 10px auto;
    .el-input__inner {
      background: #E4E7ED;
      border-radius: 20px;
      border: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.squarePage{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .squareTop{
    width: 100%;
    height: 130px;
    background: #ffff;
    margin-bottom: 15px;
    overflow:hidden;
    .classification{
     width: 100%;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-around;
    .classItem{
      width: 15%;
      height: 50px;
      font-size: 14px;
      text-align: center;
      color: #5e5e5e;
      .iconImage{
        width: 36px;
        height: 36px;
        margin: 0 auto;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        .svg-icon{
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  }
  .squareButtom{
    width: 100%;
    height: 1000px;
    background: #ffff;
  }
}
</style>
